require('../css/run.less')
window.utils.namichref()
let userID = JSON.parse(localStorage.getItem('users'))
//--------------------------------------------
//获取节点
//使用接口获取运动数据
let obj = {
	"骑行": null,
	"跑步": null,
	"训练": null,
}
let barnameArr=[]
let barvalueArr=[]
let pieArr = []
window.$http.get(`/sport/data/${userID.userId}`, function (res) {
    if (res.status === 0) {
		res.data.days.forEach(function (item) {
			// 柱状图
			barnameArr.push(item.date)
			barvalueArr.push(item.dayTimes)
			//饼图数据
			item.exerciseData.forEach(function (item) {
				obj[item.type] += Number(item.time)
			})
		})
		for (let key in obj) {
            
			pieArr.push({
				value: obj[key],
				name: key,
			})
		}
        //柱状图
        bar(barnameArr, barvalueArr, '#echarts', 'bar')
        bar(barnameArr, barvalueArr, "#lineechart",'line')
        //饼图回显
        pie(pieArr)

	}
})
//饼图
function pie(pieArr) {
	var chartDom1 = document.querySelector('#parechart')
	var myChart1 = echarts.init(chartDom1)
	var parOption
	parOption = {
		title: {
			text: '运动数据饼图',
			left: 'left',
		},
		tooltip: {},
		legend: {
			orient: 'vertical',
			left: 20,
			top: 'center',
		},
		series: [
			{
				name: '访问来源',
				type: 'pie',
				radius: '50%',
				data: pieArr,
				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)',
					},
				},
				label: {
					position: 'inside',
					formatter: '{d}%',
				},
			},
		],
	}
	myChart1.setOption(parOption)
}
//柱状图
function bar(barnameArr, barvalueArr,id,type) {
	var chartDom = document.querySelector(id)
	var myChart = echarts.init(chartDom)
	var option

	option = {
		//标题
		title: {
			text: '最近7天运动数据柱状图',
			left: 'left',
		},
		//图例
		legend: {
			right: 'right',
		},
		//x轴
		xAxis: {
			type: 'category',
			data: barnameArr,
		},
		//y轴
		yAxis: {
			type: 'value',
		},
		series: [
			{
				name: '运动',
				data: barvalueArr,
				type: type,
				color: 'pink',
			},
		],
	}
	option && myChart.setOption(option)
}
// 数据渲染
let motion = document.querySelector('.motion p span')
let consume = document.querySelector('.consume p span')
let runimg = document.querySelector('#runimg')
let consumemation = document.querySelector('.consumemation p')
let runDays = document.querySelector('.runDays p')
let continuity = document.querySelector('.continuity p')
window.$http.get(`/users/mysportsBadge?userId=${userID.userId}`, function (res){
	console.log(res.data)
	motion.innerHTML = parseInt(res.data.sports.times)
    consume.innerHTML = parseInt(res.data.sports.calorie)
    consumemation.innerHTML=parseInt(res.data.sports.calorie/7)
    runDays.innerHTML = res.data.sports.ridekm
    continuity.innerHTML = res.data.sports.punchin
    runimg.src = (!res.data.user.imgurl)?require('../img/headerPic.jpg'):window.$BASE_URL+res.data.user.imgurl
})